<template>
	<view class="card">
		<u-collapse>
			<u-collapse-item
				:title="item.head"
				v-for="(item, index) in itemList"
				:key="index"
				:open="isOpen"
				@change="change">
				<u-form :model="form" ref="uForm">
					<u-form-item label="机构名称" required :label-width="labelWidth" prop="name" :border-bottom="false">
						<u-select
							v-model="showJigou"
							mode="single-column"
							:list="jigoulist"
							label-name="name"
							value-name="id"
							@confirm="confirmJigou">
						</u-select>
						<u-input
							v-model="form.name"
							type="select"
							placeholder="请选择机构名称"
							@click="handleJigou" />
					</u-form-item>
					<u-form-item label="联络人" :label-width="labelWidth" prop="username" :border-bottom="false">
						<u-input v-model="form.username" placeholder="请输入联络人(非必填)"/>
					</u-form-item>
					<u-form-item label="联络人电话" :label-width="labelWidth" prop="mobile" :border-bottom="false">
						<u-input v-model="form.mobile" placeholder="请输入联络人电话(非必填)"/>
					</u-form-item>
					<u-form-item label="备注一" :label-width="labelWidth" prop="remark1" :border-bottom="false">
						<u-input v-model="form.remark1" placeholder="请输入备注"/>
					</u-form-item>
					<u-form-item label="备注二" :label-width="labelWidth" prop="remark2" :border-bottom="false">
						<u-input v-model="form.remark2" placeholder="请输入备注"/>
					</u-form-item>
				</u-form>
				<view class="but-wrap">
					<button class="u-reset-button save-btn" @tap="confirmSave">确定</button>
				</view>
			</u-collapse-item>
		</u-collapse>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOpen: false, // 折叠项打开状态
				labelWidth: 160,
				itemList: [{
					head: "客户资料",
					body: '',
					open: true,
					disabled: true
				}],
				itemStyle: {
					borderBottom: '1rpx solid rgba(33, 32, 30, 0.05)',
					paddingBottom: '20rpx'
				},
				showJigou: false,
				jigoulist: [],// 产品类别列表
				form: {
					name: '',
					jigou_id: '',
					username: '',
					mobile: '',
					remark1: '',
					remark2: ''
				}
			}
		},
		methods: {
			change(e){
				this.isOpen = e.show;
				this.$emit('handleClose', !e.show);
			},
			// 确认产品类别选择
			confirmJigou(e){
				this.form.name = e[0].label;
				this.form.jigou_id = e[0].value;
				// 通过id查询对应数据
				const searchId = e[0].value; // 要查询的id
				const data = this.jigoulist.find(item => item.id === searchId);

				this.form.username = data.username;
				this.form.mobile = data.mobile;
				this.form.remark1 = data.remark1;
				this.form.remark2 = data.remark2;
			},
			// 机构选择
			handleJigou(){				
				if (this.jigoulist && this.jigoulist.length === 0) {
					this.getJigouList();
				}else {
					this.showJigou = true;
				}
			},
			// 获取机构列表
			async getJigouList(){
				let that = this;
				await that.$http('goods.getJigouList',{},'机构加载中...').then(res => {
					if(res.code === 1) {
						that.jigoulist = res.data;
						this.showJigou = true;
					}
				});
			},
			

			confirmSave(){
				if(!this.form.name){
					return this.$u.toast('请选择机构名称');
				}
				this.isOpen = false;
				this.$emit('handleClose', true);
				this.$emit('updateDataArr', this.form);
			},
		},
	}
</script>

<style lang="scss">
	.card {
		margin: 0;
		padding-top: 0;
		padding-bottom: 0;
		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08);
	}
	.customFormItem {
		width: 100%;
		display:flex;
		align-items: center;
		justify-content: space-between;
		.input {
			width: calc(100% - 60rpx);
		}
		.icon {
			width: 30rpx;
		}
	}
	.but-wrap {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.save-btn {
			width: 200rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 35rpx;
			padding: 0;
			margin: 0;
			color: rgba(#fff, 0.9);
		}
	}
</style>